<template>
  <view>
    <van-popup :show="show" position="top" custom-style="height: 20%;" @close="onClose">
      <view style="display:flex;flex-direction:column">
        <!-- 左侧列表内容部分 -->
        <view style>
          <van-search :value="value" shape="round" background="#EBEBEB" placeholder="请输入搜索关键词" @change="searchBank">
          </van-search>
        </view>
        <view style="flex:1">
          <scroll-view class="content" enable-back-to-top :scroll-into-view="toView" scroll-y="true"
            scroll-with-animation="true" @scroll="onPageScroll">
            <view v-for="(group, index) in listMain" :key="index" :id="'inToView'+group.id" :data-id="group.id">
              <view class="address_top">{{group.region}}</view>
              <view v-for="(item, index2) in group.items" :key="index2">
                <view class="address_bottom" :data-id="item.id" :data-name="item.name" @tap="select">
                  {{item.name}}
                </view>
              </view>
            </view>
          </scroll-view>
          <!-- 顶部固定分类 -->
          <view :class="'list-fixed ' + (fixedTitle=='' ? 'hide':'')"
            :style="'transform:translate3d(0,' + fixedTop + 'px,0);'">
            <view class="fixed-title">{{fixedTitle}}</view>
          </view>
          <!-- 右侧字母导航 -->
          <view class="orientation_region">
            <view class="orientation"></view>
            <block v-for="(item, index) in listMain" :key="index">
              <view :class="'orientation_city  ' + (isActive==item.id ? 'active':'' )" @tap="scrollToViewFn"
                :data-id="item.id">
                {{item.region}}
              </view>
            </block>
          </view>
        </view>
      </view>
    </van-popup>
  </view>
</template>

<script lang='ts'>
  import {
    Component,
    Vue
  } from 'vue-property-decorator'

  @Component({})
  export default class SelectBank extends Vue {
    isActive: any = {}
    temList: Array < any > = []
    listMain: [{
        id: "0",
        region: "热门银行",
        items: [{
            id: "1100",
            name: "工商银行"
          },
          {
            id: "1101",
            name: "农业银行"
          },
          {
            id: "1102",
            name: "招商银行"
          },
          {
            id: "1103",
            name: "兴业银行"
          },
        ],
      },

      {
        id: "1",
        region: "B",
        items: [{
            id: "1123",
            name: "渤海银行"
          },
          {
            id: "1124",
            name: "北京农商行"
          },
          {
            id: "1113",
            name: "北京银行"
          },
          {
            id: "1123",
            name: "渤海银行"
          },
        ],
      },
      {
        id: "2",
        region: "D",
        items: [{
          id: "1122",
          name: "东亚银行",
        }, ],
      },

      {
        id: "3",
        region: "G",
        items: [{
            id: "1109",
            name: "浦发银行",
          },
          {
            id: "1112",
            name: "光大银行",
          },
          {
            id: "1114",
            name: "广发银行",
          },
        ],
      },
      {
        id: "4",
        region: "H",
        items: [{
            id: "1117",
            name: "杭州银行",
          },
          {
            id: "1111",
            name: "华夏银行",
          },
        ],
      },
      {
        id: "5",
        region: "J",
        items: [{
          id: "1108",
          name: "交通银行",
        }, ],
      },
      {
        id: "6",
        region: "L",
        items: [{
          id: "1118",
          name: "宁波银行",
        }, ],
      },
      {
        id: "7",
        region: "M",
        items: [{
          id: "1110",
          name: "民生银行",
        }, ],
      },
      {
        id: "8",
        region: "N",
        items: [{
          id: "1115",
          name: "南京银行",
        }, ],
      },
      {
        id: "9",
        region: "P",
        items: [{
            id: "1121",
            name: "平安银行",
          },
          {
            id: "1109",
            name: "浦发银行",
          },
        ],
      },
      {
        id: "10",
        region: "S",
        items: [{
          id: 1116,
          name: "上海银行",
        }, ],
      },
      {
        id: "11",
        region: "X",
        items: [{
          id: "1103",
          name: "兴业银行",
        }, ],
      },
      {
        id: "11",
        region: "Y",
        items: [{
          id: "1119",
          name: "邮储银行",
        }, ],
      },
      {
        id: "12",
        region: "Z",
        items: [{
            id: "1107",
            name: "中国银行"
          },
          {
            id: "1120",
            name: "浙商银行"
          },
          {
            id: "1127",
            name: "浙江泰隆商业银行"
          },
          {
            id: "1127",
            name: "中国建设银行"
          },
          {
            id: "1104",
            name: "中信银行",
          },
        ],
      },
    ]
    listTitles: Array < any > = []
    fixedTitle: string = "热门银行"
    toView: string = "inToView0"
    viewPosition: Array < any > = []
    scroolHeight: number = 0
    fromType: any = {}
    // 页面周期函数--监听页面加载
    onLoad(options) {
      if (options) {
        this.setData({
          fromType: options.fromType,
        });
      }
      let num = 0;
      for (let i = 0; i < this.listMain.length; i++) {
        uni.createSelectorQuery()
          .select("#inToView" + this.listMain[i].id)
          .boundingClientRect(function (rect) {
            num = num + rect.height; //元素高度+该元素先前元素高度 ， 可理解为元素底部至可滚动视图区域顶部高度
            const _array = [{
              height: num,
              key: rect.dataset.id,
              name: this.listMain[i].region,
            }, ];
            this.setData({
              viewPosition: this.viewPosition.concat(_array), //合并数组
            });
          })
          .exec();
      }
      uni.setStorage({
        key: "bankList",
        data: this.listMain,
      });
    }

    searchBank(e) {
      const searchItem = e.detail;
      const selectList = [];
      if (searchItem) {
        uni.getStorage({
          key: "bankList",
          success: res => {
            const data = res.data;
            data.forEach(bItem => {
              bItem.items.forEach(i => {
                if (i.name.indexOf(searchItem) > -1) {
                  selectList.push(bItem);
                  selectList.forEach(z => {
                    const inItem = [];
                    z.items.forEach(zIn => {
                      if (zIn.name.indexOf(searchItem) > -1) {
                        inItem.push(zIn);
                      }
                    });
                    z.items = inItem;
                  });
                }
              });
            });
            this.setData({
              listMain: selectList,
            });
          },
        });
      } else {
        uni.getStorage({
          key: "bankList",
          success: res => {
            this.setData({
              listMain: res.data,
            });
          },
        });
      }
    }

    //点击右侧字母导航定位触发
    scrollToViewFn(e) {
      const _id = e.target.dataset.id;
      for (let i = 0; i < this.listMain.length; ++i) {
        if (this.listMain[i].id === _id) {
          this.setData({
            isActive: _id,
            toView: "inToView" + _id, //滚动条to指定view
          });
          break;
        }
      }
    }

    select(e) {
      const bankId = e.currentTarget.dataset.id;
      const bankName = e.currentTarget.dataset.name;
      if (this.fromType === {}) {
        const pages = getCurrentPages(); // eslint-disable-line
        const prevPage = pages[pages.length - 2];
        prevPage.$vm.setData({
          // 将要传递的参数在这里直接setData。上个页面就会执行这里的操作。
          bankId,
          bankName,
        });
        uni.navigateBack({
          delta: 1,
        });
      } else {
        uni.navigateTo({
          url: `/subcontract/pages/commanderCenter/commanderCenter?bankId=${bankId}&bankName=${bankName}`,
        });
      }
    }
    // 页面处理函数--监听页面滚动(not-nvue)
    onPageScroll(e) {
      const scrollTop = e.detail.scrollTop;
      if (scrollTop) {
        this.setData({
          scroolHeight: scrollTop, //获取滚动条滚动位置
        });
        for (const i in this.viewPosition) {
          if (scrollTop < this.viewPosition[i].height) {
            //判断滚动条位置是否在元素内
            this.setData({
              isActive: this.viewPosition[i].key,
              fixedTitle: this.viewPosition[i].name,
            });
            return false;
          }
        }
      }
      return false;
    }
  }
</script>

<style lang="scss" scoped>
  page {
    height: 100%;
  }

  .content {
    padding-bottom: 20rpx;
    box-sizing: border-box;
    height: 100%;
    position: fixed
  }

  .location {
    width: 100%;
  }

  .location_top {
    height: 76rpx;
    line-height: 76rpx;
    background: #f4f4f4;
    color: #606660;
    font-size: 28rpx;
    padding: 0 20rpx;
  }

  .location_bottom {
    height: 140rpx;
    line-height: 140rpx;
    color: #d91f16;
    font-size: 28rpx;
    border-top: 2rpx #ebebeb solid;
    border-bottom: 2rpx #ebebeb solid;
    padding: 0 20rpx;
    align-items: center;
    display: -webkit-flex;
  }

  .address_top {
    height: 56rpx;
    line-height: 56rpx;
    background: #EBEBEB;
    color: #999999;
    font-size: 28rpx;
    padding: 0 20rpx;
  }

  .address_bottom {
    height: 88rpx;
    line-height: 88rpx;
    background: #fff;
    color: #000000;
    font-size: 32rpx;
    padding: 0 20rpx;
    border-bottom: 2rpx #ebebeb solid;
    margin-left: 20rpx;
    margin-right: 50rpx;
  }

  .location_img {
    width: 48rpx;
    height: 48rpx;
    position: absolute;
    right: 20rpx;
    top: 125rpx;
  }

  .add_city {
    width: 228rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    border: 2rpx solid #ebebeb;
    color: #000000;
    margin-right: 20rpx;
  }

  .add_citying {
    width: 228rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    border: 2rpx solid #09bb07;
    color: #09bb07;
    margin-right: 20rpx;
  }

  .orientation {
    white-space: normal;
    display: inline-block;
    width: 80rpx;
    height: 58rpx;
    color: #999;
    text-align: center;
  }

  .orientation_region {
    width: 80rpx;
    font-size: 20rpx;
    position: fixed;
    top: 100rpx;
    right: 0rpx;
  }

  .orientation_city {
    height: 40rpx;
    line-height: 40rpx;
    color: #000;
    text-align: center;
  }

  .active {
    color: #2cc1d1;
  }

  .list-fixed {
    position: fixed;
    width: 100%;
    z-index: 999;
    height: 56rpx;
    line-height: 56rpx;
    background: #EBEBEB;
    color: #999999;
    font-size: 28rpx;
    padding: 0 20rpx;
    z-index: 9999;
  }
</style>